<!--  -->
<template>
  <div class="product-card flex-column">
    <div class="header  justify-between">
      <div class="name fz-18 lh-20">{{ info.name }}</div>
      <div class="status align-center">
        <div class="mg-right-6 lh-20" :class="info.dataStatusEnum">
          {{ dataStatusEnum.get(info.dataStatusEnum) }}
        </div>
        <el-switch
          v-model="info.dataStatusEnum"
          :active-value="$consts.DataStatusEnum.NORMAL"
          :inactive-value="$consts.DataStatusEnum.STOP"
          active-color="#67C23A"
          inactive-color="#999999"
          @change="handleChangeDataStatusEnum"
        />
      </div>
    </div>
    <div class="body flex-sub">
      <img v-if="info.icon" class="bg-img" :src="info.icon | imageFormat" />
      <div v-else class="flex-column justify-center align-center h-100P bg-img">
        <img :src="noSceneImage" class="w-100P h-100P" alt="" />
        <!--        <i class="el-icon-picture-outline fz-50"></i>-->
        <!--        <div class="fz-14 mg-top-10" style="color: #999999">未添加背景图</div>-->
      </div>
      <div class="footer w-100P justify-between pd-lr-30 pd-tb-14">
        <div class="binding-roles fz-12 align-center">已绑定角色：{{ bindingRolesNumber }}</div>
        <div>
          <el-button class="mg-right-10" type="primary" @click.stop="$emit('edit', info)">
            管理
          </el-button>
          <el-button slot="reference" type="info" @click="handleDelete">删除</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiUpdateScene } from '@/views/scene/api'

const defaultData = {
  createTime: '',
  dataStatusEnum: '',
  dataStatusName: '',
  describe: '',
  icon: '', // 图片文件id
  id: '',
  name: '',
  orgCode: '',
  updateTime: '',
}

export default {
  name: 'ProductCard',
  components: {},

  props: {
    value: { type: Object, required: true, default: () => defaultData },
  },
  data() {
    return {
      deleteConfirmDialogVisible: false,
      info: {},
    }
  },

  watch: {
    value: {
      deep: true,
      immediate: true,
      handler: function (value) {
        this.info = value
      },
    },
  },

  computed: {
    dataStatusEnum() {
      return new Map([
        [this.$consts.DataStatusEnum.NORMAL, '启用中'],
        [this.$consts.DataStatusEnum.STOP, '停用中'],
        [this.$consts.DataStatusEnum.CANCEL, '删除'],
      ])
    },
    noSceneImage() {
      return `${this.$consts.OSS_STATIC_IMAGE_URL}/no-scene.jpg`
    },
    bindingRolesNumber() {
      if (this.info && this.info.roleVos) {
        return this.info.roleVos.length
      }
      return 0
    },
  },

  methods: {
    handleChange(data) {
      this.$emit('change', data)
    },
    handleDelete() {
      this.$confirm('此操作将永久删除该产品, 是否继续?', '警告', {
        type: 'warning',
      }).then(() => {
        this.$emit('delete', this.info)
        this.handleChange(this.info)
      })
    },
    handleChangeDataStatusEnum(dataStatusEnum) {
      const data = { ...this.info, dataStatusEnum }
      this.updateProduct(data)
      this.handleChange(data)
    },
    async updateProduct() {
      try {
        await apiUpdateScene(this.info)
        this.$message.success('修改成功')
      } catch (e) {
        this.$message.error(e)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.product-card {
  min-height: vw(210px);
  overflow: hidden;
  color: #333;
  border-radius: 15px;
  box-shadow: 5px 5px 15px #999;

  .NORMAL {
    color: #d12d1f;
  }

  .STOP {
    color: #999;
  }

  .header {
    margin: 10px 20px;
  }

  .body {
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease-in-out;

    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }

    .name {
      color: #d12d1f;
    }

    .footer {
      position: absolute;
      bottom: -40px;
      color: white;
      visibility: hidden;
      transition: bottom 0.3s ease-in-out, 0.3s visibility;

      ::v-deep .el-button {
        padding: 4px 6px;
      }

      ::v-deep .el-button--danger {
        color: white;
        background: #d12d1f;
      }

      ::v-deep .el-button.is-plain:hover,
      .el-button.is-plain:focus {
        color: #333;
        background: white;
        border-color: white;
      }
    }
  }

  ::v-deep .el-dialog__header {
    padding: 15px 15px 10px;
  }

  ::v-deep .el-dialog__body {
    padding: 10px 15px;
    font-size: 14px;
    color: #606266;
  }

  ::v-deep .el-dialog__footer {
    padding: 10px 10px;
  }
}

.product-card:hover {
  .body {
    background-color: rgba(0, 0, 0, 1);
  }

  .bg-img {
    opacity: 0.8;
  }

  .footer {
    position: absolute;
    bottom: 0;
    visibility: visible;
  }
}
</style>
